<template>
  <view class="activity">
    <view class="activity-search">
      <up-input
        placeholder="请输入内容"
        suffixIcon="search"
        suffixIconStyle="color: #909399"
        :font-size="rpx2px(23)"
        shape="circle"
        v-model="params.content"
        @change="searchChange"
      />
    </view>
    <view class="activity-content">
      <up-tabs
        :list="activityStatusTabs"
        :current="curActivityStatusTab"
        :line-width="rpx2px(72)"
        :lineColor="'#00B588'"
        :line-height="rpx2px(9)"
        :itemStyle="activityStatusTabStyle"
        @change="handleActivityStatusTabChange"
        :activeStyle="{
          color: '#303133',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      />
      <up-list v-if="activityList.length !== 0" @scrolltolower="scrollToLower">
        <up-list-item v-for="(activity, index) in activityList" :key="index">
          <activity-item
            :activity-item="activity"
            @tap="handleActivityItemClick(activity)"
          />
        </up-list-item>
      </up-list>
      <none-data v-else />
    </view>

    <!-- 登录弹窗 -->
    <loginDialog
      @on-off="headelOff"
      @on-make="headelMake"
      :indicate="userLoginDialog"
    >
    </loginDialog>
  </view>
</template>

<script setup>
import loginDialog from "@/components/login/index.vue";
import { ref, watch } from "vue";
import { rpx2px } from "../../utils/utils";
import { getActivityListDataApi } from "../../api/activity";
import { onLoad, onShow } from "@dcloudio/uni-app";
import activityItem from "../components/activity-item.vue";
import { customNav } from "../../utils/customNav";

const userLoginInfo = ref("");
const userLoginDialog = ref(false);
//活动tab列表
const activityStatusTabs = ref([
  { name: "未开始" },
  { name: "进行中" },
  { name: "已结束" },
  { name: "已报名" },
]);
// 当前活动状态tab
const curActivityStatusTab = ref(0);
watch(curActivityStatusTab, () => {
  console.log("curActivityStatusTab.value", curActivityStatusTab.value);
  getActivityListData();
});
const activityStatusTabStyle = {
  flex: 1,
  fontFamily: "ali-p",
  fontSize: "31rpx",
  height: "80rpx!important",
};
function headelOff() {
  userLoginDialog.value = false;
  params.value.type = curActivityStatusTab.value = 0;
  console.log("curActivityStatusTab.value", curActivityStatusTab.value);
}
function headelMake() {
  userLoginDialog.value = false;
  userLoginInfo.value = uni.getStorageSync("token");
  customNav("my-sign-up");
}
/**
 * 监听活动状态tab切换
 * @param tab
 */
const handleActivityStatusTabChange = (tab) => {
  userLoginInfo.value = uni.getStorageSync("token");
  if (
    params.value.type !== tab.index &&
    curActivityStatusTab.value !== tab.index &&
    tab.index !== 3
  ) {
    activityList.value = [];
    params.value.page = 1;
    params.value.type = curActivityStatusTab.value = tab.index;
  } else if (tab.name === "已报名") {
    curActivityStatusTab.value = tab.index;
    activityList.value = [];
    if (!userLoginInfo.value) {
      userLoginDialog.value = true;
    } else {
      activityList.value = [];
      customNav("my-sign-up");
    }
  }
};

// 活动列表
const activityList = ref([]);
const listTotal = ref(0);
const params = ref({
  content: "",
  limit: 10,
  page: 1,
  type: 0,
});
function searchChange(value) {
  params.value.page = 1;
  params.value.content = value;
  getActivityListData();
}
/**
 * 获取活动列表数据
 * @returns {Promise<void>}
 */
const getActivityListData = async () => {
  await uni.showLoading({
    title: "加载中...",
  });
  const res = await getActivityListDataApi(params.value);
  const { code, data } = res;
  if (code === 200) {
    uni.hideLoading();
    activityList.value = data.records;
    listTotal.value = data.total;
  }
};
const getActivityListLoad = async () => {
  await uni.showLoading({
    title: "加载中...",
  });
  const res = await getActivityListDataApi(params.value);
  const { code, data } = res;
  if (code === 200) {
    uni.hideLoading();
    activityList.value.push(...data.records);
    listTotal.value = data.total;
  }
};
const handleActivityItemClick = (activity) => {
  customNav(`activity-detail?id=${activity.id}`);
};

const scrollToLower = () => {
  if (listTotal.value !== activityList.value.length) {
    params.value.page++;
    getActivityListLoad();
  }
};

// onShow(() => {
//   // curActivityStatusTab.value = 0;
//   // console.log("返回 curActivityStatusTab.value", curActivityStatusTab.value);
//   // params.value.type = 0;
//   getActivityListData();
// });
onLoad(() => {
  // curActivityStatusTab.value = 0;
  // console.log("返回 curActivityStatusTab.value", curActivityStatusTab.value);
  // params.value.type = 0;
  getActivityListData();
});
</script>

<style scoped lang="less">
.activity {
  &-search {
    padding: 54rpx 20rpx 0;

    :deep(.u-input) {
      height: 65rpx;
      background-color: @color-origin-white;
      padding-left: 35rpx !important;
      padding-right: 31rpx !important;
      box-sizing: border-box;
      box-shadow: 0 5rpx 13rpx 1rpx rgba(0, 0, 0, 0.05);
    }

    :deep(.u-icon__icon) {
      font-size: 31rpx !important;
    }

    /* #ifdef MP-WEIXIN */

    :deep(.u-input__content__field-wrapper__field) {
      font-size: 23rpx !important;
    }

    /* #endif */
  }

  &-content {
    padding: 0 36rpx 38rpx 36rpx;
    margin-top: 40rpx;
    background-color: @color-origin-white;
    /* #ifdef H5 */

    :deep(.u-tabs__wrapper__nav__item) {
      flex: 1;
    }

    /* #endif */
  }
}
</style>